<template>
	<div class="drawing-box">
		<div class="drawing_mhead">位置图</div>
		<div class="drawing_map">
			<div id="map"></div>
		</div>
	</div>
</template>
<script>
	import MapLoader from './AMap.js'
	const AMap = window.AMap
	export default {
		data() {
			return {

			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				var values = [113.85878, 22.618401]
				MapLoader().then(AMap => {
					var map = new AMap.Map('map', {
						resizeEnable: true,
						center: values,
						zoom: 13
					})
					var circleMarker = new AMap.CircleMarker({
						center: values,
						radius: 20 + Math.random() * 10, //3D视图下，CircleMarker半径不要超过64px
						strokeColor: 'white',
						strokeWeight: 2,
						strokeOpacity: 0.5,
						fillColor: 'rgba(0,0,255,0.5)',
						fillOpacity: 0.5,
						zIndex: 10,
						bubble: true,
						cursor: 'pointer',
						clickable: true
					})
					//构建信息窗体中显示的内容
					var info = []
					info.push("<div class='content-window-card'>我在<span class='content-window-sapn'>“宝星智荟城”</span>附近></div> ")

					var infoWindow
					infoWindow = new AMap.InfoWindow({
						content: info.join(''), //使用默认信息窗体框样式，显示信息内容
						offset: new AMap.Pixel(-1, -40)
					})
					infoWindow.open(map, map.getCenter())

					var marker = new AMap.Marker({
						position: new AMap.LngLat(values[0], values[1]) // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
					})
					map.add(circleMarker)
					map.add(marker)
					map.setFitView()
				}, e => {
					this.$ala.log('地图加载失败', e)
				})
			}
		}
	}
</script>
<style lang="scss">
	.drawing-box {
		padding: 20px 65px 65px 65px;
		box-sizing: border-box;

		.drawing_mhead {
			font-size: 28px;
			color: #C6C6C6;
			letter-spacing: 2px;
			padding: 24px 0;
			position: relative;

			&::after {
				content: "";
				width: 108px;
				height: 4px;
				background-color: #C6C6C6;
				position: absolute;
				bottom: 0;
				left: 0;
			}
		}

		.drawing_map {
			width: 983px;
			height: 410px;
			margin-top: 50px;
			box-sizing: border-box;

			#map {
				width: 100%;
				height: 100%;
			}
		}
	}

	.content-window-card {
		font-size: 13px;
		color: #999;

		.content-window-sapn {
			font-size: 14px;
			color: #000;
		}
	}
</style>